<template>
    <a-modal v-model="visibleFile" title="发票管理" :closable="false" width="800px">
        <a-alert 
            show-icon
            closable 
            style="margin-bottom:10px" 
            type="info">
            <template #message>
                <p>支持扩展名 .doc、.docx、.xls、.xlsx、.pdf、.png、.jpg、.gif、.jpeg</p>
                <p>单个文件大小不大于10MB，每次上传限制100个文件</p>
            </template>
        </a-alert>

        <a-alert 
            show-icon
            closable 
            v-if="onMsg"
            :message="onMsg"
            style="margin-bottom:10px" 
            type="error">
        </a-alert>

        <a-progress v-if="count>0" status="normal" :percent="count" :format="getProgressText"/>

        <a-tabs :default-active-key="activeKey">
            <a-tab-pane key="1">
                <label slot="tab">
                    <span style="cursor: pointer;">图片</span>
                    <a-badge v-if="imgList.length!==0" :count="imgList.length" style="position: absolute;top:0;left:0;"></a-badge>
                </label>
                <a-empty  v-if="imgList.length ===0" description="暂无数据"/>
                <div class="voucker-pvp" v-for="(item,index) in imgList" :key="index">
                    <img :src="item.url" style="width:108px;height:108px;margin-right:4px;" />
                    <label class="voucker-name">{{item.fileName}}</label>
                    <p class="voucker-pmp" style="bottom:20px;">
                        <a-icon type="download" style="flex: 1;text-align: left;" @click="fileDownload(item.url)"/>
                        <a-popconfirm title="删除不能恢复，确定删除？" cancelText="取消" okText="确定" @confirm="delImg('imgs',index,item.id)">
                            <a-icon slot="icon" type="question-circle-o" style="color: red" />
                            <a-icon type="delete"/>
                        </a-popconfirm>
                    </p>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2">
                <label slot="tab">
                    <span style="cursor: pointer;">docx文档</span>
                    <a-badge v-if="docList.length!==0" :count="docList.length" style="position: absolute;top:0;left:0;"></a-badge>
                </label>
                <a-empty  v-if="docList.length ===0" description="暂无数据"/>
                <div class="voucker-pvp" v-for="(item,index) in docList" :key="index">
                    <img src="~@/assets/file_doc.png" style="width:108px;height:128px;margin-right:4px;" />
                    <label class="voucker-name">{{item.fileName}}</label>
                    <p class="voucker-pmp">
                        <a-icon type="download" style="flex: 1;text-align: left;" @click="fileDownload(item.url)"/>
                        <a-popconfirm title="删除不能恢复，确定删除？" cancelText="取消" okText="确定" @confirm="delImg('doc',index,item.id)">
                            <a-icon slot="icon" type="question-circle-o" style="color: red" />
                            <a-icon type="delete" />
                        </a-popconfirm>
                    </p>
                </div>
            </a-tab-pane>
            <a-tab-pane key="3">
                <label slot="tab">
                    <span style="cursor: pointer;">xlsx文档</span>
                    <a-badge v-if="xlsxList.length!==0" :count="xlsxList.length" style="position: absolute;top:0;left:0;"></a-badge>
                </label>
                <a-empty  v-if="xlsxList.length ===0" description="暂无数据"/>
                <div class="voucker-pvp" v-for="(item,index) in xlsxList" :key="index">
                    <img src="~@/assets/file_xlsx.png" style="width:108px;height:128px;margin-right:4px;" />
                    <label class="voucker-name">{{item.fileName}}</label>
                    <p class="voucker-pmp">
                        <a-icon type="download" style="flex: 1;text-align: left;" @click="fileDownload(item.url)"/>
                        <a-popconfirm title="删除不能恢复，确定删除？" cancelText="取消" okText="确定" @confirm="delImg('xlsx',index,item.id)">
                            <a-icon slot="icon" type="question-circle-o" style="color: red" />
                            <a-icon type="delete" />
                        </a-popconfirm>
                    </p>
                </div>
            </a-tab-pane>
            <a-tab-pane key="4">
                <label slot="tab">
                    <span style="cursor: pointer;">pdf文档</span>
                    <a-badge v-if="pdfList.length!==0" :count="pdfList.length" style="position: absolute;top:0;left:0;"></a-badge>
                </label>
                <a-empty  v-if="pdfList.length ===0" description="暂无数据"/>
                <div class="voucker-pvp" v-for="(item,index) in pdfList" :key="index">
                    <img src="~@/assets/file_pdf.png" style="width:108px;height:128px;margin-right:4px;" />
                    <label class="voucker-name">{{item.fileName}}</label>
                    <p class="voucker-pmp">
                        <a-icon type="download" style="flex: 1;text-align: left;" @click="fileDownload(item.url)"/>
                        <a-popconfirm title="删除不能恢复，确定删除？" cancelText="取消" okText="确定" @confirm="delImg('pdf',index,item.id)">
                            <a-icon slot="icon" type="question-circle-o" style="color: red" />
                            <a-icon type="delete" />
                        </a-popconfirm>
                    </p>
                </div>
            </a-tab-pane>
        </a-tabs>

        <template slot="footer">
            <input type="file" ref="fileType" @change="handleChange" style="display: none;" multiple="multiple" />
            <a-button type="primary" :disabled="flag" style="float: left" @click="$refs.fileType.click()">批量上传发票</a-button>
            <a-button @click="close">取消</a-button>
        </template>

    </a-modal>
</template>
<script>
import Vue from 'vue'
import { 
    billingDel,
    billingEdit,
    billingDetail
} from '@/api/manage/billing'
import { 
    sysBaseUpload
} from '@/api/manage/base'
import { 
    previewFile
} from '@/utils/util'
    export default {
        name: 'layoutFile',
        data(){
            return {
                visibleFile:false,
                activeKey:"1",
                imgList:[],
                docList:[],
                xlsxList:[],
                pdfList:[],
                count:0,
                flag:false,
                onMsg:'',
                rows:{}
            }
        },
        methods:{
            async add(rows,flag){
                const _this = this;
                this.activeKey = "1";
                this.flag = false;
                Vue.set(this.rows, 'id', rows.id);
                Vue.set(this.rows, 'invoiceId', rows.invoiceId)
                this.count = 0;
                const imgType = ['png','jpg','jpeg','gif'];
                const xlsType = ['xls','xlsx'];
                const docType = ['docx','doc'];
                const pdfType = ['pdf'];
                this.imgList = [];
                this.xlsxList = [];
                this.docList = [];
                this.pdfList = [];
                const {code,data} = await billingDetail(this.rows);
                if(code === '1'){
                    if(data.fileResDtoList && data.fileResDtoList.length > 0){
                        data.fileResDtoList.forEach(v => {
                            let fileIndex= v.url.lastIndexOf(".");
                            let _fileType = v.url.substr(fileIndex+1);
                            if(imgType.includes(_fileType)){
                                 this.imgList.push(v)
                            }else if(xlsType.includes(_fileType)){
                                this.xlsxList.push(v)
                            }else if(docType.includes(_fileType)){
                                this.docList.push(v)
                            }else if(pdfType.includes(_fileType)){
                                this.pdfList.push(v)
                            }
                        });
                    }
                    if(flag){
                        this.visibleFile = true;
                    }
                }
            },
            async delImg(type,index,id){
                let params = {id:id};
                const {code} = await billingDel(params);
                if(code === '1'){
                    this.$message.success("操作成功");
                    if(type === 'imgs'){
                        this.imgList.splice(index,1);
                    }else if(type === 'doc' || type === 'docx'){
                        this.docList.splice(index,1);
                    }else if(type === 'xlsx' || type === 'xls'){
                        this.xlsxList.splice(index,1);
                    }else if(type === 'pdf'){
                        this.pdfList.splice(index,1);
                    }
                }
            },
            fileDownload(_url){
                previewFile(_url);
            },
            getProgressText(percent){
                return`${percent}% `
            },
            async handleChange(e) {
                e.preventDefault();
                let _this = this;
                let fileList = e.target.files;
                if(fileList.length===0){
                    e.target.value= "";
                    return;
                }
                if(fileList.length > 100){
                    _this.$message.error("一次上传最多100个文件");
                    e.target.value= "";
                    return;
                }
                this.flag = true;
                this.onMsg = '';
                this.count = 0;
                const fileType = ['pdf','doc','docx','xlsx','xls','png','jpg','gif','jpeg'];
                Vue.set(this.rows, 'fileNum', fileList.length);
                for (var i = 0;i < fileList.length;i++){
                    let isLt5M = fileList[i].size / 1024 / 1024 < 10;
                    let fileName = fileList[i].name;
                    let fileIndex= fileList[i].name.lastIndexOf(".");
                    let _fileType = fileList[i].name.substr(fileIndex+1);
                    
                    let formData = new FormData();
                    formData.append("file",fileList[i]);
                    sysBaseUpload(formData).then(response => {
                        const data = response.data;
                        if(!isLt5M){
                            e.target.value= "";
                            if(i == 1){
                                _this.count = 0;
                                _this.flag = false;
                            }else if(i > 1){
                                _this.count++;
                            }
                            _this.onMsg = '当前上传的'+fileName+'文件大小（'+(fileList[i].size / 1024 / 1024)+'MB）已经超过最大上线 10MB。请上传不能大于10MB的文件';
                            return;
                        }
                    
                        if (!fileType.includes(_fileType)) {
                            e.target.value= "";
                            if(i == 1){
                                _this.count = 0;
                                _this.flag = false;
                            }else if(i > 1){
                                _this.count++;
                            }
                            _this.onMsg ='当前上传的'+fileName+'文件格式有误。文件格式包含 pdf、doc、docx、xlsx、xls、png、jpg、gif、jpeg';
                            return;
                        }
                        _this.count++;
                        _this.saveInvoiceFile(data,fileName);
                        e.target.value= "";
                     
                    }).catch(error => {
                        _this.count = 0;
                        _this.flag = false;
                        e.target.value= "";
                        _this.$message.error("网络不稳定，请重试或联系管理员");
                    })
                }
            },
            async saveInvoiceFile(url,fileName){
                let params = {
                    invoiceId:this.rows.invoiceId,
                    url:url,
                    filename:fileName
                }
                const {code,data} = await billingEdit(params);
                if(code === '1'){
                    if (this.count == this.rows.fileNum) {
                        this.count = 100;
                        this.flag = false;
                        this.$message.success("操作成功");
                        this.$emit("ok",this.rows);
                    }
                }
            },
            close(){
                this.onMsg = '';
                this.visibleFile = false;
            }
        }
    }
</script>